<template>
  <div class="main" @click="closeDialog">
    <div class="main-mask"></div>
    <div class="dialog" @click.stop="clickDialog">
      <div class="mode-container" @click="changeLoginMode">
        <div class="mode-title">
          {{ codeLoginMode ? "手机号登录" : "扫码登录更快捷" }}
        </div>
        <div class="mode" v-if="codeLoginMode">
          <img src="@/assets/images/qrpc.png" alt="切换登录模式" />
        </div>
        <div class="mode" v-else>
          <img src="@/assets/images/qrcode.png" alt="切换登录模式" />
        </div>
      </div>
      <div class="qrcode" v-if="codeLoginMode">
        <div class="qr-title">微信扫码 关注公众号立即登录</div>
        <div class="qrcode-image">
          <el-image
            :class="codeInvalid ? 'invalid' : ''"
            v-loading="!loginCode"
            style="width: 190px; height: 190px"
            v-bind:src="loginCode"
          >
          </el-image>
        </div>

        <el-button
          type="text"
          v-show="codeInvalid"
          width="200px"
          class="invalid-code"
          icon="el-icon-refresh-right"
          @click="freshQrCode"
        >
          二维码已过期，点击刷新
        </el-button>
      </div>
      <div class="phone-login" v-else>
        <h1 class="phone-title">手机号登录</h1>
        <el-input placeholder="请输入手机号码" v-model="form.phone"></el-input>
        <el-input
          type="password"
          style="margin-top: 24px; margin-bottom: 12px"
          placeholder="请输入密码"
          v-model="form.pwd"
        ></el-input>
        <div class="phone-bottom">
          <el-button class="register" type="text" @click="forgetPwd"
            >注册新账号</el-button
          >
          <el-button class="forget-pwd" type="text" @click="forgetPwd"
            >忘记密码</el-button
          >
        </div>
        <el-button
          type="primary"
          style="width: 100%; margin-top: 30px"
          @click="onLogin"
          >登录</el-button
        >
      </div>
      <div class="hint">
        登录即表示同意
        <a href="/protocol" target="_blank">《用户协议》</a>和
        <a href="/privacy" target="_blank">《隐私政策》</a>
      </div>
    </div>
  </div>
</template>

<script>
import { getCode, verifyCode, sendSms, phoneBind } from "@/api/login";

var countDownFrom = 60;

export default {
  data() {
    return {
      countDown: countDownFrom,
      codeInvalid: false,
      loopId: 0,
      loginCode: "",
      ticket: "",
      sid: "",
      uid: "",
      phone: "",
      form: {
        phone: "",
        pwd: "",
        code: "",
      },
      codeLoginMode: true,
    };
  },
  props: {},
  computed: {},
  mounted() {},
  created() {
    this.getLoginCode();
  },
  destroyed() {
    clearInterval(this.loopId);
  },
  watch: {
    loginCode: function (nv, ov) {
      this.checkLoginStatus();
    },
  },
  methods: {
    // 变更登录方式
    changeLoginMode() {
      this.codeLoginMode = !this.codeLoginMode;
      if (this.codeLoginMode && this.codeInvalid) {
        this.freshQrCode();
      }
    },
    // 忘记密码
    forgetPwd() {},
    // 点击登录，手机号密码登录
    onLogin() {},
    // 获取登录验证码
    getLoginCode() {
      var channel = "";
      var referrer = "";

      // 执行请求
      getCode(channel, referrer)
        .then((response) => {
          this.loginCode = response.data.qrcode_url;
          this.ticket = response.data.ticket;
        })
        .catch(function (error) {
          error;
        });
    },
    // 获取sid
    checkLoginStatus() {
      clearInterval(this.loopId);

      this.loopId = setInterval(() => {
        this.countDown--;
        if (this.countDown == 0) {
          clearInterval(this.loopId);
          this.codeInvalid = true;
        } else {
          verifyCode(this.ticket)
            .then((response) => {
              if (response.code == 10010) {
                clearInterval(this.loopId);
                this.freshQrCode();
              }

              if (response.data && response.data.s_id) {
                this.sid = response.data.s_id;
                this.uid = response.data.uid;
                this.loginSuccess();
                clearInterval(this.loopId);
              }
            })
            .catch((err) => {
              console.log(err);
              Message({
                message: "登录异常，请稍候再试",
                type: "error",
                duration: 3 * 1000,
              });
              this.loading = false;
              clearInterval(this.loopId);
            });
        }
      }, 2000);
    },
    // 刷新二维码
    freshQrCode() {
      this.codeInvalid = false;
      this.countDown = countDownFrom;
      this.sid = "";
      // 继续检查
      this.getLoginCode();
    },
    // 触发关闭dialog的时间
    loginSuccess() {
      // 提交用户的TOKEN和sid
      this.$store.dispatch("Login", {
        sid: this.sid,
        uid: this.uid,
      });
      this.$emit("loginsucc");
    },
    closeDialog() {
      this.$emit("closeDialog", false);
    },
    clickDialog() {},
  },
};
</script>

<style lang="less" scoped>
.main {
  z-index: 999;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45);
}

.dialog {
  z-index: 9999;
  width: 600px;
  height: 480px;
  background: white;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mode-container {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.mode-title {
  position: relative;
  color: #2972fd;
  font-size: 13px;
  display: block;
  padding: 4px 0px;
  border: 1px solid #fff;
  border-radius: 4px;
  background-color: #fff;
}

.mode {
  width: 50px;
  height: 50px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mode img {
  width: 30px;
  height: 30px;
  margin-bottom: 6px;
  margin-left: 8px;
}

.bindphone {
  width: 100%;
  height: 240px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.qrcode {
  margin-top: 40px;
  width: 100%;
  height: 64%;
  box-sizing: border-box;
  border-radius: 5px;
  background: #fefeff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.qrcode-image {
  border: 1px solid #eee;
}

.qr-title {
  color: #333;
  font-size: 20px;
  line-height: 22px;
  margin-bottom: 20px;
}

.invalid-code {
  margin-top: 10px;
  color: #2972fd;
}

.phone-login {
  margin-top: 60px;
  width: 70%;
  height: 64%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.phone-title {
  margin-bottom: 20px;
  font-size: 16px;
  color: #333;
  align-self: flex-start;
}

.phone-bottom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: flex-end;
}

.register {
  color: #2972fd;
}

.forget-pwd {
  color: #666;
  font-weight: bold;
}

.hint {
  font-size: 14px;
  margin-top: 20px;
}

.hint a {
  cursor: pointer;
  color: #2972fd;
  text-decoration: none;
}
.invalid {
  -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
  filter: blur(5px);
}
</style>
